<template>
  <div class="container">
    <ul class="title" @click="changeTab">
      <li :class="{active: currentTab==='telCheck'}" id="telCheck">使用手机号查询</li>
      <li :class="{active: currentTab==='insureNoCheck'}" id="insureNoCheck">使用保单号查询</li>
      <li :class="{active: currentTab==='plateNoCheck'}" id="plateNoCheck">使用车牌号查询</li>
    </ul>
    <div v-for="(item, key) in obj" v-if="currentTab === key">
      <div v-for="i in item">
        <label :for="i.id">{{i.label}}</label>
        <input type="text" :id="i.id" v-model="i.value" :placeholder="i.label">
      </div>
    </div>
    <div class="submitBtn" @click="goSubmit">提交</div>
    <div class="hoverDemo">
      <div @hover="changeShow">显示图片</div>
      <img :style="{display: isShow ? 'block' : 'none'}" src="./lp.png" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentTab: 'telCheck',
        isShow: false,
        obj: {
          telCheck: [
            {
              id: 'telNumber',
              label: '手机号',
              value: ''
            },
            {
              id: 'telCheckCardNumber',
              label: '证件号码',
              value: ''
            }
          ],
          insureNoCheck: [
            {
              id: 'insureNumber',
              label: '保单号',
              value: ''
            },
            {
              id: 'insureNoCheckCardNumber',
              label: '证件号码',
              value: ''
            }
          ],
          plateNoCheck: [
            {
              id: 'plateNumber',
              label: '车牌号',
              value: ''
            },
            {
              id: 'plateNoCheckCardNumber',
              label: '证件号码',
              value: ''
            }
          ]
        }
      }
    },
    methods: {
      changeTab: function (e) {
        this.currentTab = e.target.id
      },
      goSubmit: function () {
        const objItem = this.obj[this.currentTab]
        for (let i of objItem) {
          console.log(i.value)
        }
       /* for (let i in this.obj) {
          console.log(this.obj[i])
        }*/
      },
      changeShow: function () {
        console.log(this.isShow)
        this.isShow = !this.isShow
      }
    },
    /*computed: {
      getResult: function () {
        return this.num1 + this.num2
      }
    },
    watch: {
      num1: function (val) {
        console.log(val)
      },
      num2: function (val) {
        console.log(val + '----------')
      }
    }*/
  }
</script>
<style lang="sass" scoped>@import "Tab"</style>
